{extend name="public/base" /}

{block name="pjax_container"}
<?php
    $titleTypeName = '员工视图';
?>
<style>
    input{
        margin-right:10px;
    }
    select{
        float: left;
        height:30px;
        margin-right:10px;
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow b {
        border-color: #888 transparent transparent transparent;
        border-style: solid;
        border-width: 5px 4px 0 4px;
        height: 0;
        left: 50%;
        margin-left: -4px;
        margin-top: -2px;
        position: absolute;
        top: 110%;
        width: 0;
    }
    .sreachs{
        border-radius: 5px !important;
        background-color: #1890FF;
        color: #fff;
        border: none;
    }
    .sreachs:hover{
        border-radius: 5px !important;
        background-color: #1890FF;
        color: #fff;
        border: none;
        outline: none;
    }
    .input-group>p{
        padding-top: 10px;
        font-size: 16px;
        margin-right: 10px;
    }
    tr>td,th{
        text-align: center;
        line-height: 40px;
        border-bottom: 1px solid #eee;
    }
    tr>td>a{
        color: #666;
    }

    tr>td:hover tr{
        background-color: #eee;
    }
    #demo0{
        position: absolute;
        bottom: 10px;
        right: 10px;
    }
    .box-body{
        position: relative;
        padding: 10px 10px 50px 10px;
    }


    .content-header>.breadcrumb>li{
        color: #999;
    }
    .content-header>.breadcrumb>.active{
        color: #666;
    }
    .content-header{
        height: 51px;

    }
    .btn-primary{
        background-color: #1890FF;
        color: #fff;
        border: none;
        border-radius: 6px !important;
        margin-left: 15px;
        padding: 5px 10px;
    }
    .box-primary{
        border-top-color: #ecf0f5 !important;
        border-top-width: 16px;

    }
    .btn-primary:hover{
        background-color: #1890FF;
        color: #fff;
        border: none;
        opacity: .9;
        border-radius: 6px !important;
    }
    .delete-one{
        background-color: ff4141 !important;
        margin-left: 15px;
        border-radius: 6px;
    }
    .sreachs{
        background-color: #1890FF;
        color: #fff;
        border: none;
        border-radius: 6px !important;
        margin-left: 15px;
        padding: 7px 15px;
        height: 34px !important; 
    }
</style>
<section class="content-header">
    <ol class="breadcrumb">
        <li>奖票管理</li>
        <li class="active">{$titleTypeName}</li>
    </ol>
</section>
<section class="content">
    <div class="row">
        <div class="col-md-12">
            <div class="box box-primary">
                <div class="box-tools" style="margin:5px;">
                    <form id="form1" action="{:search_url([ 'department_id_name', 'department_id', 'name', 'job_number', 'prize_buckle_time'])}" method="GET" pjax-search="">
                        <div class="input-group input-group-sm" style="display: flex; align-items: center; flex-wrap: wrap;">
                            <input type="hidden" name="page" value="1" />
                            <p>组织机构:</p>
                            <div class="xyqk_input">
                            <input class="form-control department_id_name" name="department_id_name" value="{:input('get.department_id_name','')}" placeholder="选择组织机构" AUTOCOMPLETE="off" style="width:200px;height: 34px;">
                            <input class="department_id" name="department_id" value="{:input('get.department_id','')}" type="hidden">
                                    <div class="delect_btn_an" style="right: 15px; top: 6px;"><i class="fa fa-remove"></i></div>
                                </div>
                            <p>姓名:</p>
                            <input class="form-control" name="name" value="{:input('get.name')}" placeholder="请输入姓名" AUTOCOMPLETE="off" style="width:200px;height: 34px;">

                            <p>工号:</p>
                            <input class="form-control" name="job_number" value="{:input('get.job_number')}" placeholder="请输入工号" AUTOCOMPLETE="off" style="width:200px;height: 34px;">

                            <p>奖扣时间:</p>
                            <input class="form-control lay_date" name="prize_buckle_time" value="{$prize_buckle_time}" placeholder="奖扣时间" AUTOCOMPLETE="off" style="width:200px;height: 34px;">

                            <div class="input-group-btn" style="display: inline-block;">
                                <div class="pull-left">
                                    <button type="submit" class="btn btn-default sreachs">
                                        <i class="fa fa-search"></i> 查询
                                    </button>
                                    <a href="javascript:xls_explode();" class="btn btn-primary upload-x"><i class="fa fa-cloud-upload "></i> 导出</a>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>

                <div class="box-header with-border">
                    <div class="pull-left">
                    </div>

                </div>
                <div class="box-body table-responsive">
                    <table class="table table-bordered table-hover table-one">
                        <tr>
                            <!--<th width="35"><input type="checkbox" class="minimal checkbox-toggle"></th>-->
                            <th>月份</th>
                            <th>员工姓名</th>
                            <th>员工工号</th>
                            <th>部门名称</th>
                            <th>奖票总数</th>
                            <th>已打印</th>
                            <th>未打印</th>
                        </tr>
                        {volist name="$list" id="v"}
                        <tr>
                            <!--<td><input type="checkbox" name="id[]" value="{$v.id}" class="minimal checkbox"></td>-->
                            <td>{:date('Y-m', $v['create_time'])}</td>
                            <td><a href="{:url('review/index', ['user_id'=>$v['u_id']])}">{$v.name}</a></td>
                            <td>{$v.job_number}</td>
                            <td>{$v.department_name}</td>
                            <td>{$v.ticket_num}</td>
                            <td>{$v.print_yes}</td>
                            <td>{$v.print_no}</td>
                        </tr>
                        {/volist}
                    </table>

                </div>
                <div id="demo0"></div>
                <div class="box-footer clearfix">
                </div>
            </div>
        </div>
    </div>
</section>
<script>
    function xls_explode() {
        window.location.href = "{:url('Ticket/staff_view')}?" + $('#form1').serialize() + '&export=1';
        return false;
    }
    $(function(){

        $(".select2").select2({language:"zh-CN"});

        // 列表部分 全选
        $('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({
            checkboxClass: 'icheckbox_minimal-blue',
            radioClass: 'iradio_minimal-blue'
        });
        $('.checkbox-toggle').on('ifChecked', function(event){
            var _this = $(this);
            var _table = _this.closest('.table');
            _table.find("tr td input[type='checkbox']").iCheck("check");
        });
        $('.checkbox-toggle').on('ifUnchecked', function(event){
            var _this = $(this);
            var _table = _this.closest('.table');
            _table.find("tr td input[type='checkbox']").iCheck("uncheck");
        });
    });

    var now = new Date();
    var yy = now.getFullYear(); //年
    var mm = now.getMonth() + 1; //月
    var dd = now.getDate(); //日
    var hh = now.getHours(); //时
    var ii = now.getMinutes(); //分
    var ss = now.getSeconds(); //秒
    var time = yy + "-";
    if (mm < 10) time += "0";
    time += mm + "-";
    if (dd < 10) time += "0";
    time += dd + " ";
    if (hh < 10) time += "0";
    time += hh + ":";
    if (ii < 10) time += '0';
    time += ii + ":";
    if (ss < 10) time += '0';
    time += ss;
    layui.use('laydate', function(){
        var laydate = layui.laydate;
        var nowtime = "{:date('Y-01-01 H:i:s',time())}";
        laydate.render({
            range:true,
            type:'date',
            // min: nowtime, //本年
            elem: '.lay_date',
            max:time
        });
    });

    // function xls_explode() {
    //     window.location.href = "{:url('Review/staff')}?" + $('#form1').serialize()+'&export=1';
    //     return false;
    // }


    var currPage = 1;
    var limit = 11;
    var count = 3;
    let tableOne = document.querySelector(".table-one");
    let sreachs = document.querySelector(".sreachs");
    sreachs.onclick = function(){
        let data = $("form").serialize();
        let d =   data.split("&");
        console.log(d);
        let department_id_name, department_id, name, job_number, prize_buckle_time;
        for (let i = 0; i < d.length; i++) {
            switch (i) {
                case 0:
                    department_id_name = JSON.stringify(d[i]);
                case 1:
                    department_id = JSON.stringify(d[i]);
                    break;
                case 2:
                    name = JSON.stringify(d[i]);
                    break;
                case 3:
                    job_number = JSON.stringify(d[i]);
                    break;
                case 4:
                    prize_buckle_time = JSON.stringify(d[i]);
                    break;
                default:
                    break;
            }


        }
        let departmentId  =    department_id.split("=");
        let NAME =         name.split("=");
        let     jobNumber =       job_number.split("=");
        let prizeBuckleTime  =     prize_buckle_time.split("=");
        department_id =    departmentId[1].substr(0, departmentId[1].length - 1);
        console.log(department_id,'stone');
        name =   NAME[1].substr(0, NAME[1].length - 1);
        job_number = jobNumber[1].substr(0, jobNumber[1].length - 1);
        prize_buckle_time= prizeBuckleTime[1].substr(0, prizeBuckleTime[1].length - 1);
        prize_buckle_time=    prize_buckle_time.replace("+"," ");
        prize_buckle_time = prize_buckle_time.replace("+", " ");
        let obj1 = Object();
        var department_id1 = $("input[name='department_id']").val();
        var name1 = $("input[name='name']").val();
        var job_number1 = $("input[name='job_number']").val();
        var prize_buckle_time1 = $("input[name='prize_buckle_time']").val();
        obj1.department_id = department_id1;
        obj1.name = name1;
        obj1.job_number = job_number1;
        obj1.prize_buckle_time = prize_buckle_time1;
        $.ajax({
            type: "post",
            url: "{:url('ticket/staff_view')}",
            data: {
                p: 1,
                department_id:department_id1,
                name: name1,
                job_number: job_number1,
                prize_buckle_time: prize_buckle_time1
            }, success: function (data) {
                count = data.count;
                pagelist(count, 1, limit, obj1);
            }

        });

        let tr = document.querySelectorAll(".table-one>tr");
        tr.forEach((item, index) => {

            tableOne.removeChild(item);
        })
        return false;

    }

    function load(curr=1,data = {}){
        $.ajax({
            type: "post",
            url: "{:url('ticket/staff_view')}",
            data: {
                p: curr,
                department_id:data.department_id,
                name:data.name,
                job_number:data.job_number,
                prize_buckle_time:data.prize_buckle_time
            } ,success: function (data) {
                if (data != null ) {
                    try {

                        let list = data.list;

                        for (let i = 0; i < list.length; i++) {
                            let trow = getDataRow(list[i]);
                            tableOne.appendChild(trow);
                        }
                    } catch (error) {
                        console.log(error);
                    }
                }
            }

        });
    }


    load();
    pagelist(count, currPage, limit,undefined)
    function getDataRow(h) {
        var row = document.createElement('tr'); //创建行

        var idCell = document.createElement('td'); //创建第一列id
        idCell.innerHTML = h.month; //填充数据
        row.appendChild(idCell); //加入行  ，下面类似

        var nameCell = document.createElement('td');//创建第二列name
        nameCell.innerHTML ="<a href='/company/ticket/index?user_id=" + h.user_id + "'>" + h.user_name + "</a>";
        row.appendChild(nameCell);

        var jobCell = document.createElement('td');//创建第三列job
        jobCell.innerHTML = h.job_number;
        row.appendChild(jobCell);


        //到这里，json中的数据已经添加到表格中，下面为每行末尾添加删除按钮

        var delCell = document.createElement('td');//创建第四列，操作列
        delCell.innerHTML = h.department_name;
        row.appendChild(delCell);
        var firstCell = document.createElement('td');//创建第四列，操作列
        firstCell.innerHTML = h.ticket_num;
        row.appendChild(firstCell);

        var lastCell = document.createElement('td');//创建第四列，操作列

        lastCell.innerHTML = h.print_yes;
        row.appendChild(lastCell);

        var lastCell5 = document.createElement('td');//创建第五列，操作列

        lastCell5.innerHTML = h.print_no;
        row.appendChild(lastCell5);


        return row; //返回tr数据
    }



    function pagelist(count, currPage, limit,obj1){


        if(obj1 != null && obj1 != undefined){
            load(currPage, obj1);

        }
        layui.use(['laypage', 'layer'], function () {
            var laypage = layui.laypage
                , layer = layui.layer;
            laypage.render({
                elem: 'demo0'
                , count: count //数据总数
                , theme: '#67A5DF',
                curr: currPage,//当前页
                limit: limit,//每页的条数
                jump: function (obj, first) {
                    if (!first) { //设置首次渲染分页无需走业务逻辑处理函数，不然会陷入死循环
                        let tr = document.querySelectorAll(".table-one>tr");
                        tr.forEach((item, index) => {
                            tableOne.removeChild(item);
                        });
                        console.log(obj.curr);
                        load(obj.curr,obj1);

                    }

                }

            });

        })

    }
</script>

<!-- 弹框样式引入 -->
<link rel="stylesheet" href="__STATIC__/global/an_tree_css/an_tree_css.css">
<!-- Modal 弹出层重写 部门单选  id="myModal_single"-->
<div class="modal fade" id="myModal_department_single" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content" style="width:543px;height: 635px;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">部门选择</h4>
            </div>
            <div class="modal-body">
                <div class="modal-left" style="width:485px;">
                    <div class="modal-left-title" style="margin-bottom: 20px;">
                        <div class="input-group">
                            <input name="search_user_name" type="text" class="form-control" placeholder="">
                            <span class="input-group-btn">
                                <button class="btn btn-info search_btn" type="button"
                                    style="width: 47px; height: 34px; background-color: #1890FF;border: none;outline: none;">
                                    <span class="glyphicon glyphicon-search"></span>
                                </button>
                            </span>
                        </div>
                    </div>
                    <div class="input-group table-body" style="width: 485px">
                        <div class="table-left" style="width: 100%;">
                            <div class="an_tree search_hide">

                            </div>
                            <div class="search_show" style="display: flex;  flex-direction: column;padding: 20px 10px;">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<style>
.a{
    flex-direction: row;
}
</style>
</div>
<!-- 部门弹窗操作 部门单选   -->
<script>
    var now_item_name;
    var now_item_id;
    $(".department_id_name").focus(function () {
        $('#myModal_department_single').modal('show');
        // double_max = $("input[name='double_max']").val();
        now_item_name = $(this);//节点
        now_item_id = $(".department_id");//节点
        // first_id = $("input[name='first_check_user_id']").val();//id值
        // user_type = 2;
    });

</script>
<!-- 树结构js操作 部门单选  -->
<script>
    $("#myModal_department_single .an_tree").on("click", ".fa", function () {
        $(this).toggleClass("fa-caret-down");
        $(this).toggleClass("fa-caret-right");
        $(this).parents(".an_tree_set").eq(0).children(".an_tree_pack").toggle();
    });
    $("#myModal_department_single").on("click", ".an_tree_txt", function () {
        $('#myModal_department_single').modal('hide');
        now_item_name.val($(this).html());
        now_item_id.val($(this).attr("data_id"));
    });
    $("#myModal_department_single").on("click", ".search_btn", function () {
        var item = $("#myModal_department_single .an_tree_txt");
        var search_name = $("#myModal_department_single input[name='search_user_name']").val();
        $("#myModal_department_single .search_show").html("");
        if(search_name == ""){
            $("#myModal_department_single .search_hide").show();
            $("#myModal_department_single .search_show").removeClass("an_tree");
        }else{
            $("#myModal_department_single .search_hide").hide();
            $("#myModal_department_single .search_show").show();
            var content = "";
            for (let i = 0; i < item.length; i++) {
                var name = item.eq(i).html();
                if (name.indexOf(search_name) != -1) {
                    content += item.eq(i).prop("outerHTML");
                }
                console.log(name);
            }
            $("#myModal_department_single .search_show").append(content)
        }
        
    });
</script>
<!-- 递归填充目录 部门单选  -->
<script>
    var department = "";
    $.ajax({
        type: 'get',
        url: "{:url('base/base_department_page')}",
        dataType:"json",
        async: false,
        success: function (data) {
            // eventList = JSON.parse(data);
            department = data;
        }
    })
    var an_tree = ergodic(department)
    $("#myModal_department_single .an_tree").append(an_tree);
    function ergodic(data) {
        var content = '';
        $.each(data, function (index, value) {
            if (value.children != "") {
                var children = ergodic(value.children);
                content += '<div class="an_tree_set"><div class="an_tree_entry"><div class="an_tree_main"><span class="an_tree_icon"><i class="fa fa-caret-right"></i></span><span class="an_tree_txt" data_id="' + value.id + '" data_pid="' + value.pid + '">' + value.title + '</span></div></div><div class="an_tree_pack">' + children + '</div></div>';
            } else {
                content += '<div class="an_tree_set"><div class="an_tree_entry"><div class="an_tree_main"><span class="an_tree_icon"></span><span class="an_tree_txt" data_id="' + value.id + '" data_pid="' + value.pid + '">' + value.title + '</span></div></div><div class="an_tree_pack"></div></div>';
            }
        });
        return content;
    }

</script>


{/block}
